<template>

  <div class="top">
    <el-card>

      <div class="op">
        <el-button type="success" @click="handleExport()" plain>漏洞导出</el-button>
      </div>
    </el-card>
    <div class="max">
      <div class="container">
        <div class="show"></div>
      </div>
    </div>
  </div>




</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  import * as echarts from 'echarts';



  import { queryHole, searchHole } from "@/api/system/devops"
  export default {
    data(){

      return {
        hign:[],
        normal:[],
        tableData:[],
        names:[],


      }

    },
    methods:{

      handleExport() {
        this.download('devopscontroller/exportOneHole', {
          ...this.queryParams
        }, `File_${new Date().getTime()}.xlsx`)
      },

      initCharts(){
        const myChart = echarts.init(document.querySelector('.show'))

        const option = {
          title: {
            text: '漏洞危险分析',
            //subtext: '业界情况分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            /*
                显示信息的格式
                {a}:数据系列名称 对应 数据系列 name属性
                {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                {c}:数值 对应 数据系列中data属性中每个对象的value属性
                {d}:根据数据值自动计算出的百分比
            */
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            /* 此处表示图例纵向排列 */
            orient: 'vertical',
            /* 图例显示的左侧 */
            left: 'left',
            /* 各个数据对应数据系列中data中的name属性值 */
            data: ['高危险', '一般危险']
            /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */
          },
          series: [
            {
              name: '漏洞',
              type: 'pie',
              data: [



                { value: this.hign.length, name: '高危险' },
                { value: this.normal.length, name: '一般危险' },




              ],

              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
            }
          ]
        }

        myChart.setOption(option)

      },
      initData() {
        queryHole().then(response => {
          response.data.forEach(e => {
            // var a = this.tableData.indexOf(e.bugName)
           // console.log(e)
            var a=this.names.indexOf(e.bugName)

              if(a==-1){
                  //cun
                  this.names.push(e.bugName)
                this.tableData.push(e)
            if(e.level=='高危险'){
              this.hign.push('1')
            }else{
              this.normal.push('1')
            }
            this.hign.splice(2)
             }



          });
          this.initCharts()

        })

      },








    },
    created(){

    },




    mounted(){


      this.initData()





    }







  }
</script>

<style scoped>
  .container{
    width: 1830px;
    display: flex;
    margin-right: 50px;
    overflow-x: auto;

  }
  .show{
    width: 800px;
    height: 700px;
    margin-right: 50px;
    margin-left: 20px;


  }
  .show1{
    width: 800px;
    height: 700px;
    margin-right: 50px;
    margin-left: 20px;


  }
  .max{
    margin-left: 200px;
  }
</style>
